<template>
    <el-card shadow="never">
        报表/会计报表
        <el-table :data="tableData1"  style="width: 100%">
            <el-table-column prop="bedsSum" label="床位总数(张)" />
            <el-table-column prop="bedsCount" label="租用次数(次)" />
            <el-table-column prop="moneySum" label="总收益(￥)" />
        </el-table>
        <div class="block">
            <el-table :data="tableData2" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
                <el-table-column prop="indentTime" label="indentTime" sortable />
                <el-table-column prop="payTime" label="payTim" sortable />
                <el-table-column prop="indentStatus" label="indentStatus" sortable />
                <el-table-column prop="returnTime" label="returnTime" sortable />
                <el-table-column prop="indentMoney" label="indentMoney(￥)" sortable />
            </el-table>

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                :current-page="pageInfo.page" :page-sizes="[5, 10, 15, 20]" :page-size="pageInfo.size"
                layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" />
        </div>
    </el-card>
</template>

<script>
import axios from "axios";
export default {

    data() {
        return {
            tableData1: [],
            tableData2: [],
            data: {},
            currentPage4: 1,
            pageInfo: {
                total: 0,
                page: 1,
                size: 5
            }
        }
    },
    mounted() {
        this.findPage();
        this.findAll();
    },

    methods: {
        findPage() {

            axios.post('http://localhost:8080/table/findAllPage', this.pageInfo).then(r => {
                console.log(r)
                if (r.code == 200) {
                    this.tableData2 = r.data.list;
                    this.pageInfo.total = r.data.total;
                }
            })
        },
        findAll() {
            axios.post('http://localhost:8080/table/find').then(r => {
                if (r.code == 200) {
                    this.tableData1.push(r.data)

                }
            });
        },
        handleSizeChange(size) {
            this.pageInfo.size = size;
            this.findPage();
        },
        handleCurrentChange(page) {
            this.pageInfo.page = page;
            this.findPage();
        }
    }
}
</script>

<style lang="less" scoped>
.el-pagination {
    text-align: left;
    margin: 20px;
}

.block {
    margin: 20px 0;
}
</style>